﻿@rendermode InteractiveServer
@using Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons
@using Color=Microsoft.FluentUI.AspNetCore.Components.Color

@inject AccentBaseColor AccentBaseColor
 
<FluentStack HorizontalGap="2" class="toolbar">
    
    <FluentButton IconStart="@(new Icons.Regular.Size24.SparkleAction())">
        功能1
    </FluentButton>
    <FluentMenuButton 
        @ref=menubutton Text="扩展功能" 
        Items="@items" ButtonAppearance="Appearance.Neutral"
        IconStart="new Icons.Regular.Size24.Settings()" 
        OnMenuChanged="HandleOnMenuChanged">
    </FluentMenuButton>
</FluentStack>

<style>
    .toolbar{
        border: 1px groove;
        padding:2px;
        height:36px;
    }
</style>

@code {
    private FluentMenuButton menubutton = new();

    private Dictionary<string, string> items = new Dictionary<string, string>()
    {
        {"0078D4","功能11"},
        {"D83B01","功能12"},
        {"107C10","功能13"},
        {"464EB8","功能15"},
    };

    private async Task HandleOnMenuChanged(MenuChangeEventArgs args)
    {
        await AccentBaseColor.SetValueFor(menubutton.Button!.Element, $"#{args.Id}".ToSwatch());
    }

}